<template>
  <div class="slide" v-bind:style="{ 'background': getBackground }">
    <grid-layout class="gridlayout"
                 :layout.sync="insideSlideArray"
                 :col-num="18"
                 :row-height="rowHeight"
                 :is-draggable="true"
                 :is-resizable="true"
                 :vertical-compact="false"
                 :preventCollision="false"
                 :margin="[0, 0]"
                 :use-css-transforms="false"
                 style="height:100%">
       <grid-item v-for="item in insideSlideArray" class="insideGridItem"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        dragAllowFrom=".dragable">
        <div class="insideContent" style="height:100%"  @click= "insideActive(item.i)" @contextmenu.prevent="itemMenu(item.itemContent.type,item.i,$event)">
          <div class="dragable"></div>
          <div class="nodrag" v-bind:style="{ 'border-width': item.itemBorder.width  + 'px', 'border-style': item.itemBorder.type, 'border-color': item.itemBorder.color, 'border-radius': item.itemBorder.radius + 'px', 'box-sizing': 'border-box' }">
             <item :type="item.itemContent.type"  :index="item.i"></item>
          </div>
        </div>
       </grid-item>
       <!-- {{this.insideSlideArray}} -->
       <!-- {{"activeArrayIndex" + this.$store.state.activeArrayIndex}}
       {{ "active Y" +this.$store.state.layout[this.$store.state.activeArrayIndex].y}}
       {{"insideMaxNum" + this.$store.state.insideMaxNum}}
       {{ "arrayindex" + this.$store.state.insideActiveArrayIndex}} -->
    </grid-layout>
    <edit-echart ref="editEchart"></edit-echart>
    <edit-image ref="editImage"></edit-image>
    <edit-ck-text ref="editCkText"></edit-ck-text>
    <edit-shadow-text ref="editShadowText"></edit-shadow-text>
    <animation ref="animation"></animation>
    <border ref="border"></border>
  </div>
</template>
<script>
import Item from '@/components/Item/Item.vue'
import EditEchart from '@/components/Edit/EditEchart.vue'
import EditImage from '@/components/Edit/EditImage.vue'
import EditCkText from '@/components/Edit/EditCkText.vue'
import EditShadowText from '@/components/Edit/EditShadowText.vue'
import Animation from '@/components/Edit/Animation.vue'
import Border from '@/components/Edit/Border.vue'

export default {
  data () {
    return {
      // key: 1
    }
  },
  computed: {
    insideSlideArray () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent
    },
    insideActiveLayoutIndex () {
      return this.$store.state.insideActiveLayoutIndex
    },
    getBackground () {
      return this.$store.getters.getBackground
    },
    getInnerHeight () {
      return this.$store.state.innerHeight
    },
    getInnerWidth () {
      return this.$store.state.innerWidth
    },
    rowHeight () {
      return Math.floor((Math.min(this.getInnerHeight - 150, (this.getInnerWidth - 280) * 9 / 16))) / 18
    }
  },
  watch: {
    insideActiveLayoutIndex (val) {
      const index = this.insideSlideArray.indexOf(this.insideSlideArray.filter(function (currentValue) {
        return currentValue.i === val
      })[0])
      this.$store.commit('updateInsideActiveArrayIndex', index)
    }
  },
  methods: {
    insideActive (i) {
      console.log('内部layoutindex' + i)
      this.$store.commit('updateInsideActiveLayoutIndex', i)
    },
    copyItem () {
      this.$store.commit('copyItem')
    },
    deleteItem () {
      this.$store.commit('deleteItem')
    },
    itemMenu (type, i, event) {
      console.log('右键点击')
      this.$store.commit('updateInsideActiveLayoutIndex', i)
      this.$contextmenu({
        items: [
          {
            label: '编辑',
            icon: 'el-icon-edit-outline',
            divided: true,
            onClick: () => {
              switch (type) {
                case 'ck-text':
                  this.$refs.editCkText.key += 1
                  this.$refs.editCkText.drawer = true
                  break
                case 'shadow-text':
                  this.$refs.editShadowText.key += 1
                  this.$refs.editShadowText.drawer = true
                  break
                case 'base-image':
                  this.$refs.editImage.key += 1
                  this.$refs.editImage.drawer = true
                  break
                default:
                  this.$refs.editEchart.ini()
                  this.$refs.editEchart.drawer = true
              }
            }
          },
          {
            label: '动画',
            icon: 'el-icon-s-operation',
            divided: true,
            onClick: () => {
              this.$refs.animation.key += 1
              this.$refs.animation.drawer = true
            }
          },
          {
            label: '边框',
            icon: 'el-icon-postcard',
            divided: true,
            onClick: () => {
              this.$refs.border.key += 1
              this.$refs.border.drawer = true
            }
          },
          {
            label: '复制',
            icon: 'el-icon-document-copy',
            divided: true,
            onClick: () => {
              console.log('复制' + i)
              this.copyItem()
            }
          },
          {
            label: '删除',
            icon: 'el-icon-delete',
            divided: true,
            onClick: () => {
              console.log('删除' + i)
              this.deleteItem()
            }
          },
          {
            label: '播放',
            icon: 'el-icon-video-play',
            divided: true,
            onClick: () => {
               this.$router.push('/play')
            }
          },
          {
            label: '浏览',
            icon: 'el-icon-reading',
            divided: true,
            onClick: () => {
               this.$router.push('/browse')
            }
          }
        ],
        event,
        // x: event.clientX,
        // y: event.clientY,
        customClass: 'class-a',
        zIndex: 600,
        minWidth: 80
      })
      return false
    }
  },
  mounted () {
  },
  components: {
    Item,
    EditEchart,
    EditImage,
    EditCkText,
    EditShadowText,
    Animation,
    Border
  }
}
</script>

<style scoped>
    .slide {
      /* background: radial-gradient(ellipse, rgba(66,127,115,1) 0%, rgba(2,0,36,1) 100%);
      background: radial-gradient(ellipse, rgba(58,153,178,1) 0%, rgba(13,56,112,1) 100%);
      background: radial-gradient(ellipse, rgba(119,52,106,1) 0%, rgba(58,36,80,1) 100%);
      background: radial-gradient(ellipse, rgba(231,75,30,1) 0%, rgba(147,29,9,1) 100%);
      background: linear-gradient(45deg, #d53369 0%, #daae51 100%); */
      padding:0;
      overflow: visible;
      display:block
    }
    .gridlayout {
      background-color: transparent;
      width:100%;
      height:100%;
    }
    /* .insideGridItem {
      overflow: hidden;
    } */
    .insideGridItem:hover {
      outline: 1px solid rgb(119,119,119);
    }
    .dragable {
      height:5px;
      background-color: transparent;
    }
    .dragable:hover {
      background-color: rgb(177, 177, 191);
    }
    .nodrag {
      height:calc(100% - 5px);
      overflow: hidden;
    }
</style>
